
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动效果</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	ul {
		list-style:none;
	}
	nav {
		width: 1200px;
		height: 120px;
		border: 1px solid pink;
		margin: 100px auto;
		overflow: hidden;
	}
	nav li {
		float: left;
	}
	nav ul {
		width: 200%;/*防止换行 */
		animation: moving 7s linear infinite; /*引用动画   linear 匀速运动 infinite无限循环*/
	}  /*定义动画*/
	@keyframes moving {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(-1200px);
		}
	}
	nav:hover ul {
		cursor: pointer;
		animation-play-state: paused;   /*鼠标经过nav  里面的ul就不做动画了 暂停动画*/
	}
	</style>
</head>
<body>
	<nav>
		<ul>
			<li><img src="image/8.jpg"  width="200" height="120" alt=""></li>
			<li><img src="image/9.jpg"  width="200" height="120" alt=""></li>
			<li><img src="image/10.jpg" width="200" height="120" alt=""></li>
			<li><img src="image/11.jpg" width="200" height="120" alt=""></li>
			<li><img src="image/12.jpg" width="200" height="120" alt=""></li>
			<li><img src="image/13.jpg" width="200" height="120" alt=""></li>
		</ul> 
		<ul>
			<li><img src="image/8.jpg"  width="200" height="120" alt=""></li>
			<li><img src="image/9.jpg"  width="200" height="120" alt=""></li>
			<li><img src="image/10.jpg" width="200" height="120" alt=""></li>
			<li><img src="image/11.jpg" width="200" height="120" alt=""></li>
			<li><img src="image/12.jpg" width="200" height="120" alt=""></li>
			<li><img src="image/13.jpg" width="200" height="120" alt=""></li>
		</ul> 
	</nav>
</body>
</html>